<template>
  <div class="app-container">
    <el-card shadow="never" class="standard-margin">
      <span class="font-title-medium">基础信息</span>
      <div class="form-container-border">
        <el-row v-for="item in baseInfo">
          <el-col :span="6" class="form-border form-left-bg font-small">{{ item.label }}</el-col>
          <el-col :span="18" class="form-border font-small">{{ temp[item.key] }}</el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { bus } from '../../../../../bus'

export default {
  name: 'Detail',
  props: {
    // bus 前缀
    busNamePrefix: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 用来存储详情数据 和 用来存储输入得数据
      temp: {},

      baseInfo: [
        {
          label: '附属账户号',
          key: 'exAcctNo'
        }
      ]
    }
  },
  created() {
    this.busWatch()
  },
  methods: {

    // bus 事件监听 方法集合
    busWatch() {
      var self = this
      // 监听列表查看详情按钮是否点击 ==> 根据ID查询数据
      bus.$on(`${this.busNamePrefix}ViewDetail`, (data) => {
        if (self.Util.isObjEmpty(data)) {
          self.viewDetail(data)
        }
      })
    },

    // 查询详情方法
    viewDetail(data) {
      viewAPI(data).then(response => {
        var detail = response.data.data.acctDetail
        this.temp = detail
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .detail-container {
    position: absolute;
    left: 0;
    right: 0;
    width: 1080px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
  }

  .standard-margin {
    margin-top: 15px;
  }
  .form-border {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
  }

  .form-container-border {
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
    margin-top: 15px;
  }

  .form-left-bg {
    background: #F2F6FC;
  }

  .font-small {
    font-size: 14px;
    color: #606266;
  }
</style>
